<template>
    <div class="order-detail-box">
        <nav-bar class="nav-bar">
            <template v-slot:default>
                订单详情
            </template>
        </nav-bar>
        <div class="order-status">
            <div class="status-item">
                <label>订单状态：</label>
                <span>{{ statusString }}</span>
            </div>
            <div class="status-item">
                <label>订单编号：</label>
                <span>{{ detail.order_no }}</span>
            </div>
            <div class="status-item">
                <label>下单时间：</label>
                <span>{{ detail.created_at }}</span>
            </div>
            <van-button v-if="detail.status == 1" @click="showPayFn"
            style="margin-bottom: 10px;" color="#1baeae"  block>去支付</van-button>
            <van-button v-if="detail.status == 2" @click="sendGoods" block>催发货</van-button>
            <van-button v-if="detail.status == 3" @click="handleConfirmOrder" block>确认订单</van-button>
        </div>
        <div class="order-price">
            <div class="price-item">
                <label>商品金额：</label>
                <span>￥{{ detail.amount + '.00' }}</span>
            </div>
            <div class="price-item">
                <label>配送方式：</label>
                <span>普通快递</span>
            </div>
        </div>
        <van-card 
            v-for="item in detail.orderDetails.data" :key="item.id"
            :num="item.num"
            :price="item.price+'.00'"
            desc="全场包邮"
            :title="item.goods.title"
            :thumb="item.goods.cover_url"
            @click="itemClick(item.goods.id)"
        />
        <van-popup
            closeable
            :close-on-click-overlay="false"
            v-model:show="showPay"
            position="bottom"
            :style="{height: '40%' }"
        >
            <h3 class="zifhu">选择支付方式</h3>
            <van-radio-group v-model="checked">
                <van-cell-group inset>
                    <van-cell title="微信支付" clickable @click="checked = '1'">
                        <template #icon>
                            <van-icon class="iconw" :name="zfbicon" />
                        </template>
                        <template #right-icon>
                            <van-radio name="2" />
                        </template>
                    </van-cell>
                </van-cell-group>
            </van-radio-group>
            <van-button @click="topay(checked)" style="width: 100%"
            type="danger"><span>{{ checked=='1' ? '使用微信支付' : '使用支付宝支付' }}</span></van-button>
        </van-popup>
    </div>
</template>

<script>
    import {ref,reactive,toRefs,onMounted,computed} from 'vue';
    import NavBar from '@/components/common/navbar/NavBar.vue';
    import { getOrderDetail,confirmOrder,payOrderStatus } from '@/network/order';
    import { Dialog, Toast } from 'vant';
    import { useRoute, useRouter } from 'vue-router';

    export default{
        name: 'OrderDetail',
        components: {
            NavBar,
        },
        setup() {
            const route = useRoute();
            const router = useRouter();
            const state = reactive({
                orderNo: '', //订单ID
                detail:{
                    orderDetails:{
                        data:[]
                    },
                    status:0
                },
                showPay:false,
                wxicon:require('@/assets/images/wx.png'),
                zfbicon:require('@/assets/images/zfb.png'),
            })
            const checked = ref('1');
            const init = () =>{
                const {id} = route.query;
                state.orderNo = id;
                getOrderDetail(id).then(res=>{
                    console.log(res);
                    state.detail = res;
                })
            }
            onMounted(() => {
                Toast.loading({message:'加载中...',forbidClick:true});
                init();
                Toast.clear();
            })
            const statusString = computed(()=>{
                // 1下单 2支付 3发货 4收货 5过期
                let status = ['', '已下单', '已支付', '等待发货', '确认收货', '已过期'];
                return status[state.detail.status];
            })
            const showPayFn=()=>{
                state.showPay=true;
                // 轮询查看
                const timer = setInterval(()=>{
                    payOrderStatus(state.orderNo).then(res=>{
                        console.log(res);
                        if(res == '2')  {
                            clearInterval(timer);
                            state.showPay = false;
                            router.push({path:'/orderdetail', query:{id:state.orderNo}});
                        }
                    })
                },2000)
            }
            const handleConfirmOrder = () =>{
                Dialog.confirm({
                    title:'是否确认订单'
                }).then(()=>{
                    confirmOrder(state.orderNo).then(res=>{
                        console.log(res);
                        Toast('确认成功');
                        init();
                    })
                }).catch(()=>{

                })
            }
            const sendGoods=()=>{
                Dialog.alert({
                    message:'收到，马上安排'
                }).then(()=>{

                })
            }
            const topay = (checked) => {
                let types = ['','wechat','aliyun'];
                router.push({path: '/paytest', query:{type:types[checked], orderid:state.orderNo}});
            }
            return {
                ...toRefs(state),
                statusString,
                handleConfirmOrder,
                sendGoods,
                topay,
                showPayFn,
                checked,
                itemClick:(id)=>{
                    router.push({path: '/detail', query:{id:id}})
                }
            }
        }
    }

</script>

<style scoped>
    .order-detail-box {
        text-align: left;
        background: #f7f7f7;
    }

    .order-status {
        background: #fff;
        margin-top: 44px;
        padding: 20px;
        font-size: 15px;
    }

    .status-item {
        margin-bottom: 10px;
    }

    label {
        color: #999;
    }

    .order-price {
        background: #fff;
        margin: 20px 0;
        padding: 20px;
        font-size: 15px;
    }

    .price-item {
        margin-bottom: 10px;
    }

    label {
        color: #999;
    }

    .van-card {
        margin-top: 0;
    }

    .van-card__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    h3 {
        font-size: 14px;
        padding: 15px;
        margin-top: 10px;
        text-align: center;
    }

    .van-radio-group {
        margin-top: 10px;
        text-align: center;
    }

    .van-icon__image {
        width: 25px;
        height: 25px;
    }
</style>